<!--  -->
<template>
    <div class="valid-error">
        <div class="anov-modal-icon-wrapper">
            <div class="anov-modal-circle-o"></div>
            <div class="anov-modal-circle-i"></div>
            <i class="platformicon icon_jinggao anov-modal-icon"></i>
        </div>
        <div class="valid-error-wrapper">
            <p class="anov-valid-label">{{label}}</p>
        </div>
    </div>
</template>

<script>
import { Input } from 'ant-design-vue';
const { TextArea } = Input;
export default {
    name: 'validError',
    components: {},
    data() {
        return {
            label: '身份认证已过期，请重新输入验证码：',
        };
    },
    computed: {
    },
    watch: {},
    methods: {
        init(params){
            this.label = params.content
            this.tl = new TimelineMax({
                autoRemoveChildren: true,
                onStart: function(){
                }
            })
            let tw1 = TweenMax.to('.valid-error', 0.3, {opacity: 1})
            let tw4 = TweenMax.to('.valid-error .anov-modal-icon-wrapper', 0.3, { scale: 1, opacity: 1, ease: Power0.easeInOut})
            let tw5 = TweenMax.to('.valid-error .anov-modal-icon', .2, {opacity: 1, scale: 1})
            let tw8 = TweenMax.to('.valid-error .valid-error-wrapper', 0.3, {opacity: 1})
            this.tl.addLabel('start')
            this.tl
                .add(tw1, 'start+=0')
                .add(tw4, 'start+=0.1')
                .add(tw5, 'start+=0.2')
                .add(tw8, 'start+=.4')
            return this.tl
        },
        reset(){
            this.tl.reverse();
            TweenMax.set('.valid-error', {opacity: 0})
            TweenMax.set('.valid-error .anov-modal-icon-wrapper', { scale: 0, opacity: 0})
            TweenMax.set('.valid-error .anov-modal-icon', {opacity: 0, scale: 0})
        },
        destroy(params){
            TweenMax.to('.anov-valid-error', .3, {opacity: 0, height: 0})
            this.reset()
            if(typeof params.onClose == "function"){
                params.onClose()
            }

        }
    },
    created() {

    },
    mounted() {
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.valid-error {
  opacity: 0;
}
.valid-error-wrapper {
  margin-top: 50px;
  text-align: center;
}
.anov-valid-textarea {
  width: 600px;
  padding: 5px;
  min-height: 100px;
  margin-top: 20px;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.8);
  color: rgba(199, 255, 250, 0.8);
}
.anov-valid-error {
  height: 0;
  opacity: 0;
}
.get-valid {
}
</style>
